<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="lib/animate.css" />

<div id="app">
	<input type="button" value="taggle1" @click="flag1=!flag1" />
	<transition>
		<p v-if="flag1">哈哈</p>
	</transition>


	<input type="button" value="toggle2" @click="flag2=!flag2" />
	<transition name="Ken">
		<p v-if="flag2">哈哈</p>
	</transition>

	<input type="button" value="toggle3" @click="flag3=!flag3" />
	<transition enter-active-class="animated swing" leave-active-class="animated flash"
		:duration="{ enter: 800, leave: 800 }">
		<p v-if="flag3">哈哈</p>
	</transition>

	<input type="button" value="toggle4" @click="flag4=!flag4" />
	<transition enter-active-class="swing" leave-active-class="flash" :duration="{ enter: 800, leave: 800 }">
		<p v-if="flag4" class="animated">哈哈</p>
	</transition>

</div>

<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			flag1: true,
			flag2: true,
			flag3: true,
			flag4: true,
		},
		methods: {

		},
	})
</script>

<style type="text/css">
	/*公用的样式*/
	.v-enter,
	.v-leave-to {
		opacity: 0;
		transform: translateX(150px);
	}

	.v-enter-active,
	.v-leave-active {
		transition: all 0.8s ease-in-out;
	}

	/* 私有加name后的样式 */
	.Ken-enter,
	.Ken-leave-to {
		opacity: 0;
		transform: translateY(150px);
	}

	.Ken-enter-active,
	.Ken-leave-active {
		transition: all 0.8s ease-in-out;
	}
</style>